<template>
  <div id="adsorb" class="adsorb" @mousedown="handleDown">
    <div v-for="item in elements" :key="item.id" :data-key="item.id" class="element" :style="getElementStyle(item)"></div>
<!--    <div v-for="(item, index) in lines" :key="'line' + index" class="line" :style="getLineStyle(item)"></div>-->
    <adsorb :lines="lines" @init="initChange"/>
  </div>
</template>

<script>
// import Adsorb from '@/components/autoAdsorb/adsorb'
import Adsorb from '@/components/autoAdsorb/adsord.vue'
export default {
  name: 'AutoAdsorb',
  components: { Adsorb },
  data() {
    return {
      elements: [
        { id: 1, width: 150, height: 100, color: 'red', top: 600, left: 0 },
        { id: 2, width: 200, height: 200, color: 'blue', top: 0, left: 400 },
        { id: 3, width: 250, height: 200, color: '#000', top: 200, left: 600 },
        { id: 4, width: 160, height: 80, color: '#6fc640', top: 200, left: 400 },
        { id: 5, width: 200, height: 100, color: '#134dc1', top: 100, left: 300 },
        { id: 6, width: 100, height: 200, color: '#7618c6', top: 200, left: 300 }
      ],
      adsorb: {},
      lines: []
    }
  },
  mounted() {
    // this.adsorb = new Adsorb({ positionId: 'adsorb', adsorbPadding: 10 })
  },
  methods: {
    getLineStyle(data) {
      const style = {
        borderWidth: 0,
        borderStyle: 'solid',
        borderColor: 'red',
        width: data.width + 'px',
        height: data.height + 'px',
        top: data.top + 'px',
        left: data.left + 'px'
      }
      if (/v/.test(data.type)) {
        style.borderLeftWidth = '1px'
      }
      if (/h/.test(data.type)) {
        style.borderTopWidth = '1px'
      }
      return style
    },
    getElementStyle(data) {
      return {
        width: data.width + 'px',
        height: data.height + 'px',
        left: data.left + 'px',
        top: data.top + 'px',
        background: data.color
      }
    },
    initChange(data) {
      this.adsorb = data
    },
    handleDown(e) {
      if (e.target.dataset.key) {
        const id = parseInt(e.target.dataset.key)
        this.adsorb.init({
          activeId: id,
          elementClassName: 'element'
        })

        const index = this.elements.findIndex(item => item.id === id)
        const startX = e.clientX
        const startY = e.clientY
        const { top, left } = this.elements[index]
        const move = (moveE) => {
          const endX = moveE.clientX
          const endY = moveE.clientY
          const offsetX = endX - startX
          const offsetY = endY - startY
          const newData = {
            ...this.elements[index],
            top: offsetY + top,
            left: offsetX + left
          }
          this.$set(this.elements, index, newData)

          this.$nextTick(() => {
            this.adsorb.setActiveElementData(moveE.target)
            this.adsorb.findLines()
            this.lines = this.adsorb.getLines()
            const { top: newTop, left: newLeft } = this.adsorb.getPosition()
            const { top, left } = this.elements[index]
            this.$set(this.elements, index, {
              ...this.elements[index],
              top: top + newTop,
              left: left + newLeft
            })
          })
        }

        const up = (upE) => {
        /*  this.lines = []
          this.adsorb.setActiveElementData(upE.target)
          this.adsorb.findLines()
          this.lines = this.adsorb.getLines()
          const { top: newTop, left: newLeft } = this.adsorb.getPosition()
          const { top, left } = this.elements[index]
          this.$set(this.elements, index, {
            ...this.elements[index],
            top: top + newTop,
            left: left + newLeft
          })*/
          // this.lines = []
          document.removeEventListener('mousemove', move, true)
          document.removeEventListener('mouseup', up, true)
        }
        document.addEventListener('mousemove', move, true)
        document.addEventListener('mouseup', up, true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.adsorb {
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;

  .element {
    position: absolute;
    cursor: pointer;
    opacity: 0.8;
  }

  .line {
    position: absolute;
  }
}
</style>

